<template>
  <a-card :bordered="false">
    <a-steps :current="stepCurrent">
      <a-step title="创建角色" />
      <a-step title="分配角色权限" />
      <a-step title="创建企业" />
      <a-step title="企业配置应用" />
      <a-step title="企业关联项目" />
      <a-step title="创建企业成员" description="(租户管理员账号)" />
      <a-step title="分配项目" />
    </a-steps>

    <img v-if="stepCurrent == 0" src="~@/assets/guide/guide0.png" />
    <img v-if="stepCurrent == 1" src="~@/assets/guide/guide1.png" />
    <img v-if="stepCurrent == 2" src="~@/assets/guide/guide2.png" />
    <img v-if="stepCurrent == 3" src="~@/assets/guide/guide3.png" />
    <img v-if="stepCurrent == 4" src="~@/assets/guide/guide4.png" />
    <img v-if="stepCurrent == 5" src="~@/assets/guide/guide5.png" />
    <img v-if="stepCurrent == 6" src="~@/assets/guide/guide6.png" />

    <div style="text-align: center;margin-top: 10px;">
      <a-button type="primary" size="large" v-if="stepCurrent > 0" @click="preStep()">上一步</a-button>
      <a-button type="primary" size="large" style="margin-left: 8px" v-if="stepCurrent < 6" @click="nextStep()">下一步</a-button>
    </div>
  </a-card>
</template>

<script>
  export default {
    name: 'Guide',
    data () {
      return {
        stepCurrent: 0
      }
    },
    methods: {
      preStep: function () {
        this.stepCurrent--
      },
      nextStep: function () {
        this.stepCurrent++
      }
    }
  }
</script>
